<template>
  <svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
      <g class="hero-icons" transform="translate(352.000000, 44.000000)">
        <path
          class="hero-icon hero-icon-1 hero-icon--line"
          d="M67.9100478,46.533669 C41.4232923,41.7095462 19.6934451,46.302143 11.3075829,60.8268822 C5.08594528,71.6030748 7.27151972,86.0067879 15.9285936,101.106252"
        ></path>
        <path
          class="hero-icon hero-icon-2 hero-icon--line"
          d="M30.2849913,120.46661 C41.243568,132.509273 55.7667544,144.206588 72.8846905,154.089633 C113.69002,177.648601 156.051349,183.283871 176.168455,169.566881"
        ></path>
        <circle class="hero-icon hero-icon-3 hero-icon--circle" cx="185" cy="163" r="11"></circle>

        <path
          class="hero-icon hero-icon-4 hero-icon--line"
          d="M168.712085,117.011934 C186.053192,96.5261231 192.894725,75.4688937 184.526327,60.9744031 C178.406575,50.3746817 165.18029,45.0644667 148.184837,44.8434393"
        ></path>
        <path
          class="hero-icon hero-icon-5 hero-icon--line"
          d="M123.879401,47.4832579 C107.838006,50.9201969 90.2641836,57.6854858 72.9698617,67.6703673 C30.9602155,91.9246478 4.57811277,127.105828 8.15869375,151.502356"
        ></path>
        <circle class="hero-icon hero-icon-6 hero-icon--circle" cx="11" cy="163" r="11"></circle>

        <path
          class="hero-icon hero-icon-7 hero-icon--line"
          d="M57.2996169,169.094663 C66.3669653,194.413962 81.1998943,210.912475 97.9595403,210.912475 C110.104945,210.912475 121.238508,202.248064 129.899251,187.841199"
        ></path>
        <path
          class="hero-icon hero-icon-8 hero-icon--line"
          d="M140.356454,163.91057 C145.161419,148.555719 147.938898,130.403455 147.938898,110.95376 C147.938898,63.2217718 131.210891,23.3038536 108.840161,13.3705693"
        ></path>
        <circle class="hero-icon hero-icon-9 hero-icon--circle" cx="98" cy="12" r="11"></circle>

        <circle class="hero-icon hero-icon-10 dot" cx="98" cy="112" r="10"></circle>
      </g>
    </g>
  </svg>
</template>
<style >
.hero-icon {
  transform-origin: 50% 50%;
  stroke: #9feaf9;
  stroke-width: 5;
  stroke-linecap: round;
}
.hero-icon.dot {
  fill: #9feaf9;
  stroke: none;
}
.hero-icon--line {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
}
.hero-icon--circle {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}

@keyframes hero-icon-animation {
  100% {
    stroke-dashoffset: 0;
  }
}

.hero-icon-1 {
  animation: hero-icon-animation 1s 0.7s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-2 {
  animation: hero-icon-animation 1s 0.8s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-3 {
  animation: hero-icon-animation 1s 0.9s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-4 {
  animation: hero-icon-animation 1s 1s cubic-bezier(0.05, 0.35, 0.2, 1) forwards;
}
.hero-icon-5 {
  animation: hero-icon-animation 1s 1.1s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-6 {
  animation: hero-icon-animation 1s 1.2s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-7 {
  animation: hero-icon-animation 1s 1.3s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-8 {
  animation: hero-icon-animation 1s 1.4s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
.hero-icon-9 {
  animation: hero-icon-animation 1s 1.5s cubic-bezier(0.05, 0.35, 0.2, 1)
    forwards;
}
</style>
